<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
<base href="${base}">
<meta charset="utf-8">
<title>情感分析</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${base}/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${base}/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="${base}/layuiadmin/style/template.css" media="all">
<link rel="stylesheet" href="${base}/css/my.css" media="all">
<style>
.layuiadmin-card-text {
	padding: 10px;
	text-align: center;
	font-size: 15px;
}
.layuiadmin-card-text cite {
	font-style: normal;
    font-size: 24px;
    font-weight: 300;
    color: #009688;
}
.week {
	text-align: right;
	margin-top: 10px;
}
</style>
</head>
<body>
	<div class="layui-fluid layadmin-maillist-fluid">
		<div class="layui-card">
			<div class="layui-card-body my-flex">
				<div id="test2"></div>
				<div id="chart1" style="flex: 1; height: 350px"></div>
				<div id="chart2" style="flex: 1; height: 350px"></div>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-header"><span id="title"></span></div>
			<div class="layui-card-body my-flex">
				<div id="pie1" style="flex: 1; height: 350px"></div>
				<div id="pie2" style="flex: 1; height: 350px"></div>
				<div id="pie3" style="flex: 1; height: 350px"></div>
			</div>
		</div>
		
		<div class="layui-card">
			<div class="layui-card-header layui-form">
				<div class="layui-form-item">
					<div class="layui-inline" style="margin-top:2px;">
						<label class="layui-form-label" style="width:60px">日期范围</label>
						<div class="layui-input-inline" style="width:200px;">
							<input type="text" class="layui-input" id="test6" placeholder=" - ">
						</div>
					</div>
				</div>
			</div>
			
			<div class="layui-card-body my-flex">
				<div id="pie11" style="flex: 1; height: 350px"></div>
				<div id="pie22" style="flex: 1; height: 350px"></div>
				<div id="pie33" style="flex: 1; height: 350px"></div>
			</div>
		</div>
	</div>
</body>

<script src="${base}/js/yq/echarts.min.js" type="text/javascript"></script>
<script src="${base}/js/yq/echarts-wordcloud.min.js" type="text/javascript"></script>
<script src="${base}/layuiadmin/layui/layui.js"></script>
<script src="${base}/js/commons.js"></script>
<script src="${base}/js/lib/jquery-1.11.3.min.js"></script>

<script>
layui.config({
	base : '${base}/layuiadmin/' //静态资源所在路径
}).extend({
	index : 'lib/index'
}).use([ 'index', 'laydate'], function() {
	var form = layui.form;
	var laydate = layui.laydate;

	laydate.render({
		elem: '#test2',
		position: 'static',
		ready: function(d) {
			var mon = d.month;
			if(mon<10) mon = "0"+mon;
			var day = d.date;
			if(day<10) day = "0"+day;
			var str = d.year + "-" + mon + '-' + day;
			$('#title').html('日期：' + str);
			
			showWordcloud(str);
			showPieChart(str);
		},
		change: function(value, date){ //监听日期被切换
			showWordcloud(value);
			showPieChart(value);
		}
	});
	
	
	laydate.render({
	    elem: '#test6',
	    range: true,
	    value: '${dateLen}',
	    change: function(value, date){ //监听日期被切换
	    	showPieChart2(value);
		}
	});
	
	showPieChart2('${dateLen}');
})

function showWordcloud(date) {
	// 发送请求
	$$.ajax({
		url: '${base}/yq/stats/wordcloud',
		data: {date: date},
		success: function(ret) {
			wordcloud('chart1', ret.data[0]);
			wordcloud('chart2', ret.data[1]);
		}
	});
}

function showPieChart(date) {
	// 发送请求
	$$.ajax({
		url: '${base}/yq/stats/statsPie',
		data: {date: date},
		success: function(ret) {
			pieChart('pie1', ret.data[0], '情感');
			pieChart('pie2', ret.data[1], '敏感');
			pieChart('pie3', ret.data[1], '预警');
		}
	});
}

// 时间段
function showPieChart2(date) {
	// 发送请求
	$$.ajax({
		url: '${base}/yq/stats/statsPie2',
		data: {date: date},
		success: function(ret) {
			pieChart('pie11', ret.data[0], '情感');
			pieChart('pie22', ret.data[1], '敏感');
			pieChart('pie33', ret.data[1], '预警');
		}
	});
}

// 词云: data.title, data.ds
function wordcloud(id, data) {
	var myChart = echarts.init(document.getElementById(id));
	var option = {
		title: {
	        text: data.title, //标题
	        x: 'center'
	    },
		tooltip: {show: true},
		series: [{
			name: '今日主题',
			type: 'wordCloud',
			gridSize: 2,
			sizeRange: [12, 50 ], //画布范围，如果设置太大会出现少词（溢出屏幕）
			rotationRange: [-45, 90 ], //数据翻转范围
			shape: 'pentagon',
			drawOutOfBound: true,
			textStyle: {
				normal: {
					color: function() {
						return 'rgb('+ [
							Math.round(Math.random() * 160),
							Math.round(Math.random() * 160),
							Math.round(Math.random() * 160)
						].join(',') + ')';
					}
				},
				emphasis: {
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			data: data.ds
		}]
	};
	myChart.setOption(option);
}

// 饼图
function pieChart(id, data, name) {
	var dx = [], dy = [];
	for(x in data) {
		dx.push(x);
		dy.push({name: x, value: data[x]});
	}
	
	var myChart = echarts.init(document.getElementById(id));
	var option = {
		title: {
	        text: name, //标题
	        x: 'center'
	    },
		tooltip : {
			trigger: 'item',
	        formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
	        left: 'left',
	        data: dx
	    },
		series : [{
			name : name,
			type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
			data: dy
		} ]
	};
	myChart.setOption(option);
}
</script>

</html>

